<script setup lang="ts">
import { ref, watch } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { http } from '@/utils/http'
import {useToast} from 'wot-design-uni'
import { useCinemaStore } from '@/store/params'

const cinemaStore = useCinemaStore()
const { success: showSuccess, error: showError } = useToast()

// 定义响应式的导航栏标题
const navTitle = ref(cinemaStore.cinemaInfo.cinemaName)
const activeTab = ref()
const loading = ref(false)
const tabsList = [
  {
    id: 1,
    name: '正在热映'
  },
  {
    id: 2,
    name: '即将上映'
  }
]

const movieData = ref([])

onLoad((options) => {
  navTitle.value = cinemaStore.cinemaInfo.cinemaName

})

const getMovieData = (status) => {
  loading.value = true
  http.post('/movieSystem/cinema/getCinemaList', {}).then((res: any) => {
    if (res.success) {
        movieData.value = res.data
    } else {
        showError({
        msg: res.message
        })
    }
  }).finally(() => {
      loading.value = false
  })
    
  if (status === 1) {
    // 即将上映
  } else {
    // 正在上映
  }

}

const onChange = (event) => {
  getMovieData(event.index)
}

const onBuy = (status) => {
  if (status === 1) {
    // 想看
  } else {
    // 购买
    uni.navigateTo({
      url: '/pages-home/ticketPurchaseDetails'
    })

  }
}

const navBack = () => {
  uni.navigateTo({
    url: '/pages/movieList'
  })
}
</script>

<template>

<PageLayout :navbarShow="true" navLeftText="" @navBack="navBack" :navLeftArrow="true" :navTitle="navTitle">
  <view loading>
    <wd-tabs v-model="activeTab" sticky @change="onChange">
      <block v-for="item in tabsList" :key="item.id">
        <wd-tab :title="`${item.name}`" :name="item.name">
          <view v-for="dataItem in movieData" :key="dataItem.id" class="flex justify-between">
            <wd-img :width="50" :height="100"></wd-img>
            <view>
              <view class="title">{{ dataItem.name }}</view>
              <view class="info">{{ dataItem.director }}</view>
              <view class="info">{{ dataItem.actor }}</view>
              <view class="info">{{ dataItem.schedule }}</view>
            </view>
            <wd-button @click="onBuy(dataItem.status)">{{ dataItem.status === '热映中' ? '购票' : '想看'}}</wd-button>
          </view>
        </wd-tab>
      </block>
    </wd-tabs>
  </view>
  </PageLayout>
</template>

<style></style>

<route type="page" lang="json5">
{
  "style": {
    navigationStyle: 'custom',
    navigationBarTitleText: '',
  }
}
</route>
